<template>
  <div class="device-gauge">
    <div class="gauge-header">
      <div class="header-icon">
        <svg viewBox="0 0 24 24">
          <path d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16V20A1,1 0 0,1 15,21H9A1,1 0 0,1 8,20V18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,4V16H20V4H4M5,5H19A1,1 0 0,1 20,6V15A1,1 0 0,1 19,16H5A1,1 0 0,1 4,15V6A1,1 0 0,1 5,5M18.5,7A0.5,0.5 0 0,0 18,7.5A0.5,0.5 0 0,0 18.5,8A0.5,0.5 0 0,0 19,7.5A0.5,0.5 0 0,0 18.5,7Z" fill="currentColor"/>
        </svg>
      </div>
      <div class="header-info">
        <h4 class="gauge-title">设备运行监控</h4>
        <p class="gauge-subtitle">实时设备状态统计</p>
      </div>
    </div>

    <div class="gauge-main">
      <div class="gauge-chart" ref="chartRef"></div>
      
      <div class="gauge-overlay">
        <div class="center-stats">
          <div class="online-rate">{{ onlineRate }}%</div>
          <div class="rate-label">设备在线率</div>
          <div class="status-indicator" :class="getStatusClass()">
            <div class="indicator-dot"></div>
            <span>{{ getStatusText() }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="device-summary">
      <div class="summary-item online">
        <div class="summary-icon">
          <svg viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="summary-details">
          <div class="summary-value">{{ data.online }}</div>
          <div class="summary-label">在线设备</div>
        </div>
      </div>

      <div class="summary-item offline">
        <div class="summary-icon">
          <svg viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M15.5,17L10,11.5L11.5,10L15.5,14L15.5,17M10.5,7L15,11.5L13.5,13L10.5,10L10.5,7Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="summary-details">
          <div class="summary-value">{{ data.offline }}</div>
          <div class="summary-label">离线设备</div>
        </div>
      </div>

      <div class="summary-item total">
        <div class="summary-icon">
          <svg viewBox="0 0 24 24">
            <path d="M9,5A4,4 0 0,1 13,9A4,4 0 0,1 9,13A4,4 0 0,1 5,9A4,4 0 0,1 9,5M9,15C11.67,15 17,16.34 17,19V21H1V19C1,16.34 6.33,15 9,15M16.76,5.36C18.78,7.56 18.78,10.61 16.76,12.63L15.08,10.94C15.92,9.76 15.92,8.23 15.08,7.05L16.76,5.36M20.07,2C24,6.05 23.97,12.11 20.07,16.07L18.44,14.37C21.21,11.19 21.21,6.65 18.44,3.63L20.07,2Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="summary-details">
          <div class="summary-value">{{ data.total || (data.online + data.offline) }}</div>
          <div class="summary-label">总设备数</div>
        </div>
      </div>
    </div>

    <div class="device-types">
      <div class="type-item" v-for="type in deviceTypes" :key="type.name">
        <div class="type-icon">
          <svg viewBox="0 0 24 24">
            <path :d="type.icon" fill="currentColor"/>
          </svg>
        </div>
        <div class="type-info">
          <div class="type-name">{{ type.name }}</div>
          <div class="type-status">
            <span class="online">{{ type.online }}</span> / 
            <span class="total">{{ type.total }}</span>
          </div>
        </div>
        <div class="type-progress">
          <div 
            class="progress-bar" 
            :style="{ width: (type.online / type.total * 100) + '%' }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      online: 47,
      offline: 3,
      total: 50
    })
  }
})

const chartRef = ref(null)
let chartInstance = null

const onlineRate = computed(() => {
  const total = props.data.online + props.data.offline
  return total > 0 ? ((props.data.online / total) * 100).toFixed(1) : 0
})

const deviceTypes = ref([
  { name: '监控摄像头', online: 28, total: 30, icon: 'M17,9H9V15H17M17,7H9A2,2 0 0,0 7,9V15A2,2 0 0,0 9,17H17A2,2 0 0,0 19,15V9A2,2 0 0,0 17,7M21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V5A2,2 0 0,0 21,3M21,19H3V5H21V19Z' },
  { name: '环境传感器', online: 12, total: 12, icon: 'M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8Z' },
  { name: '广播设备', online: 5, total: 6, icon: 'M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.85 14,18.71V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z' },
  { name: '出入口闸机', online: 2, total: 2, icon: 'M2,12C2,16.97 6.03,21 11,21C13.39,21 15.68,20.06 17.4,18.4L15.9,16.9C14.63,18.25 12.86,19 11,19C7.13,19 4,15.87 4,12C4,8.13 7.13,5 11,5C12.86,5 14.63,5.75 15.9,7.1L17.4,5.6C15.68,3.94 13.39,3 11,3C6.03,3 2,7.03 2,12M7,13H9V11H7V13M15,11V13H17V11H15M11,8L8,11H14L11,8Z' }
])

const getStatusClass = () => {
  const rate = parseFloat(onlineRate.value)
  if (rate >= 95) return 'excellent'
  if (rate >= 85) return 'good'
  if (rate >= 70) return 'warning'
  return 'danger'
}

const getStatusText = () => {
  const rate = parseFloat(onlineRate.value)
  if (rate >= 95) return '优秀'
  if (rate >= 85) return '良好'
  if (rate >= 70) return '警告'
  return '故障'
}

const initChart = () => {
  if (!chartRef.value) return
  
  chartInstance = echarts.init(chartRef.value)
  
  const option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 10,
        radius: '85%',
        center: ['50%', '85%'],
        progress: {
          show: true,
          width: 10,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 1, y2: 0,
              colorStops: [
                { offset: 0, color: '#00ff88' },
                { offset: 0.5, color: '#00d4ff' },
                { offset: 1, color: '#66bb6a' }
              ]
            },
            shadowColor: 'rgba(0, 255, 136, 0.5)',
            shadowBlur: 10
          }
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: 10,
            color: [[1, 'rgba(255, 255, 255, 0.1)']]
          }
        },
        axisTick: {
          distance: -18,
          length: 6,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)',
            width: 1
          }
        },
        splitLine: {
          distance: -22,
          length: 12,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.4)',
            width: 2
          }
        },
        axisLabel: {
          distance: -32,
          color: 'rgba(255, 255, 255, 0.6)',
          fontSize: 9
        },
        title: {
          show: false
        },
        detail: {
          show: false
        },
        data: [{
          value: parseFloat(onlineRate.value)
        }]
      }
    ]
  }
  
  chartInstance.setOption(option)
  
  // 添加动画效果
  let animationId
  const animateGauge = () => {
    const currentValue = parseFloat(onlineRate.value)
    chartInstance.setOption({
      series: [{
        data: [{
          value: currentValue + Math.sin(Date.now() / 1000) * 2
        }]
      }]
    })
    animationId = requestAnimationFrame(animateGauge)
  }
  
  setTimeout(() => animateGauge(), 2000)
}

onMounted(() => {
  nextTick(() => {
    initChart()
  })
})
</script>

<style scoped>
.device-gauge {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gauge-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.gauge-header:hover {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.4);
}

.header-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.15);
  border-radius: 6px;
  color: #00ff88;
  flex-shrink: 0;
}

.header-icon svg {
  width: 16px;
  height: 16px;
}

.header-info {
  flex: 1;
}

.gauge-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.1rem 0;
}

.gauge-subtitle {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.gauge-main {
  position: relative;
  height: 100px;
  background: rgba(0, 255, 136, 0.03);
  border: 1px solid rgba(0, 255, 136, 0.1);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gauge-chart {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.gauge-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  z-index: 10;
  pointer-events: none;
}

.center-stats {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.online-rate {
  font-size: 1.6rem;
  font-weight: bold;
  color: #00ff88;
  text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
  margin-bottom: 0.2rem;
  animation: pulse 3s ease-in-out infinite;
  line-height: 1;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.rate-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.3rem;
  white-space: nowrap;
}

.status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
}

.indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.status-indicator.excellent .indicator-dot {
  background: #00ff88;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.status-indicator.excellent {
  color: #00ff88;
}

.status-indicator.good .indicator-dot {
  background: #66bb6a;
  box-shadow: 0 0 8px rgba(102, 187, 106, 0.5);
}

.status-indicator.good {
  color: #66bb6a;
}

.status-indicator.warning .indicator-dot {
  background: #ffab40;
  box-shadow: 0 0 8px rgba(255, 171, 64, 0.5);
}

.status-indicator.warning {
  color: #ffab40;
}

.status-indicator.danger .indicator-dot {
  background: #ff7043;
  box-shadow: 0 0 8px rgba(255, 112, 67, 0.5);
}

.status-indicator.danger {
  color: #ff7043;
}

.device-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.summary-item:hover {
  background: rgba(0, 255, 136, 0.12);
  border-color: rgba(0, 255, 136, 0.3);
  transform: translateY(-1px);
}

.summary-item.online {
  background: rgba(0, 255, 136, 0.08);
  border-color: rgba(0, 255, 136, 0.2);
}

.summary-item.offline {
  background: rgba(255, 112, 67, 0.06);
  border-color: rgba(255, 112, 67, 0.15);
}

.summary-item.offline .summary-icon {
  color: #ff7043;
}

.summary-item.total {
  background: rgba(0, 188, 212, 0.06);
  border-color: rgba(0, 188, 212, 0.15);
}

.summary-item.total .summary-icon {
  color: #00bcd4;
}

.summary-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ff88;
  flex-shrink: 0;
}

.summary-icon svg {
  width: 14px;
  height: 14px;
}

.summary-details {
  flex: 1;
  text-align: center;
}

.summary-value {
  font-size: 1rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 0.1rem;
}

.summary-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

.device-types {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 90px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 136, 0.3) transparent;
}

.device-types::-webkit-scrollbar {
  width: 3px;
}

.device-types::-webkit-scrollbar-track {
  background: transparent;
}

.device-types::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 136, 0.3);
  border-radius: 2px;
}

.type-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.1);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.type-item:hover {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.2);
}

.type-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ff88;
  flex-shrink: 0;
}

.type-icon svg {
  width: 12px;
  height: 12px;
}

.type-info {
  flex: 1;
}

.type-name {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.05rem;
}

.type-status {
  font-size: 0.7rem;
}

.type-status .online {
  color: #00ff88;
  font-weight: 600;
}

.type-status .total {
  color: rgba(255, 255, 255, 0.6);
}

.type-progress {
  width: 25px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #00ff88, #00d4ff);
  border-radius: 2px;
  transition: width 0.3s ease;
}
</style> 